<!DOCTYPE html>
<html>
  <head>
    <script src="../dist/jspsych.js"></script>
    <script src="../dist/plugin-html-keyboard-response.js"></script>
    <script src="../dist/plugin-html-button-response.js"></script>
    <link rel="stylesheet" href="../dist/jspsych.css">
    <style>
      .stimulus { font-size: 32px; }
    </style>
  </head>
  <script>

    var jsPsych = initJsPsych({
      on_finish: function() {
        jsPsych.data.displayData();
      },
      default_iti: 250
    });

    var timeline = [];

    var instructions = {
      type: jsPsychHtmlButtonResponse,
      stimulus: '<p>Each screen will show either an English word or letters that do not form a word.</p>'+
        '<p>Press y if the letters form a valid word.</p><p>Press n if the letters do not form a valid word.</p>',
      choices: ['Ready to start']
    };
    timeline.push(instructions);

    var stimuli = [
      {word: 'woman', word_validity: 'valid', word_frequency: 'high'},
      {word: 'title', word_validity: 'valid', word_frequency: 'high'},
      {word: 'speed', word_validity: 'valid', word_frequency: 'high'},
      {word: 'movie', word_validity: 'valid', word_frequency: 'high'},
      {word: 'night', word_validity: 'valid', word_frequency: 'high'},
      {word: 'house', word_validity: 'valid', word_frequency: 'high'},
      {word: 'child', word_validity: 'valid', word_frequency: 'high'},
      {word: 'apple', word_validity: 'valid', word_frequency: 'high'},
      {word: 'books', word_validity: 'valid', word_frequency: 'high'},
      {word: 'color', word_validity: 'valid', word_frequency: 'high'},
      {word: 'whigs', word_validity: 'valid', word_frequency: 'low'},
      {word: 'pecan', word_validity: 'valid', word_frequency: 'low'},
      {word: 'hanky', word_validity: 'valid', word_frequency: 'low'},
      {word: 'femur', word_validity: 'valid', word_frequency: 'low'},
      {word: 'tusks', word_validity: 'valid', word_frequency: 'low'},
      {word: 'tongs', word_validity: 'valid', word_frequency: 'low'},
      {word: 'petal', word_validity: 'valid', word_frequency: 'low'},
      {word: 'dunce', word_validity: 'valid', word_frequency: 'low'},
      {word: 'friar', word_validity: 'valid', word_frequency: 'low'},
      {word: 'gable', word_validity: 'valid', word_frequency: 'low'},
      {word: 'womfn', word_validity: 'invalid', word_frequency: 'NA'},
      {word: 'tgtle', word_validity: 'invalid', word_frequency: 'NA'},
      {word: 'speqd', word_validity: 'invalid', word_frequency: 'NA'},
      {word: 'movje', word_validity: 'invalid', word_frequency: 'NA'},
      {word: 'npght', word_validity: 'invalid', word_frequency: 'NA'},
      {word: 'hoxse', word_validity: 'invalid', word_frequency: 'NA'},
      {word: 'chrld', word_validity: 'invalid', word_frequency: 'NA'},
      {word: 'wpple', word_validity: 'invalid', word_frequency: 'NA'},
      {word: 'boxks', word_validity: 'invalid', word_frequency: 'NA'},
      {word: 'colwr', word_validity: 'invalid', word_frequency: 'NA'},
      {word: 'whzgs', word_validity: 'invalid', word_frequency: 'NA'},
      {word: 'pecjn', word_validity: 'invalid', word_frequency: 'NA'},
      {word: 'hankk', word_validity: 'invalid', word_frequency: 'NA'},
      {word: 'fembr', word_validity: 'invalid', word_frequency: 'NA'},
      {word: 'tmsks', word_validity: 'invalid', word_frequency: 'NA'},
      {word: 'tvngs', word_validity: 'invalid', word_frequency: 'NA'},
      {word: 'pettl', word_validity: 'invalid', word_frequency: 'NA'},
      {word: 'duncr', word_validity: 'invalid', word_frequency: 'NA'},
      {word: 'friwr', word_validity: 'invalid', word_frequency: 'NA'},
      {word: 'gabls', word_validity: 'invalid', word_frequency: 'NA'}
    ];

    var trials = {
      timeline_variables: stimuli,
      randomize_order: true,
      timeline: [
        {
          type: jsPsychHtmlKeyboardResponse,
          stimulus: '+',
          choices: "NO_KEYS",
          trial_duration: 500,
          post_trial_gap: 0,
          css_classes: ['stimulus']
        },
        {
          type: jsPsychHtmlKeyboardResponse,
          stimulus: jsPsych.timelineVariable('word'),
          choices: ['y','n'],
          post_trial_gap: 0,
          css_classes: ['stimulus'],
          data: {
            word_validity: jsPsych.timelineVariable('word_validity'),
            word_frequency: jsPsych.timelineVariable('word_frequency')
          },
          on_finish: function(data) {
            if (data.word_validity == 'valid') {
              var correct = jsPsych.pluginAPI.compareKeys(data.response, 'y');
            } else {
              var correct = jsPsych.pluginAPI.compareKeys(data.response, 'n');
            }
            data.correct = correct;
          }
        }
      ]
    };
    timeline.push(trials);

    var debrief = {
      type: jsPsychHtmlKeyboardResponse,
      choices: ['c'],
      stimulus: function() {
        var high_rt = jsPsych.data.get().filter({word_frequency: 'high', correct: true}).select('rt').mean();
        var low_rt = jsPsych.data.get().filter({word_frequency: 'low', correct: true}).select('rt').mean();
        var message = "<p>All done!</p>"+
          "<p>Your average correct response time for high frequency English words was "+Math.round(high_rt)+"ms.</p>"+
          "<p>Your average correct response time for low frequency English words was "+Math.round(low_rt)+"ms.</p>"+
          "<p>The typical pattern of results is that people are faster to respond to high frequency (common) "+
          "word than low frequency (uncommon) words.</p>"+
          "<p>Press c to see the entire set of data generated by this experiment.</p>";
        return message;
      }
    };
    timeline.push(debrief);

    jsPsych.run(timeline);

  </script>
</html>
